<script lang="tsx" setup>
import { generateCssVars } from '@vc/utils';
import {
  type DynamicsProps,
  getEnterpriseDynamicsClassify,
  getEnterpriseDynamicsData
} from '../../apis';
import MenuItem from '../../components/menu-item.vue';
import PageHeader from '../../components/page-header.vue';
import { DIR_INDEX_NAME, ENTERPRISE_DYNAMICS_ALL, INIT_PARAMS, PAGE_SIZE } from '../../constants';
import { useF9Context } from '../../use/use-context';
import { TAB_TYPE_MAP, INIT_TAB_STYLE } from './constants';
import { useTable } from './useTable';

interface Props {
  activeTab?: string;
  tabs: Record<string, any>;
}

const { activeTab = ENTERPRISE_DYNAMICS_ALL, tabs } = defineProps<Props>();

let pageNum = $ref(1);

const { companyId } = useF9Context();

const requestParams = reactive<DynamicsProps>({
  id: companyId,
  ...INIT_PARAMS,
  codeLevel1: '',
  startDate: undefined,
  endDate: undefined,
  order: 'desc'
});
let classifyData = ref([]);

useRequest(getEnterpriseDynamicsClassify, {
  defaultParams: [{ codeLevel1: '', companyId }],
  onSuccess: (res => {
    classifyData.value = res.filter((item, index) => {
      return item.count;
    });
    classifyData.value = classifyData.value.slice(1);
    classifyData.value.forEach((item, index) => {
      if (item.values?.length) {
        item.values.forEach(item => {
          item.code = index + '_' + item.level + '_' + item.code;
          item.name = item.name + '(' + item.count + ')';
        });
      }
    });
  })
});

const {
  data: dynamicsData,
  run,
  loading,
  error
} = useRequest(getEnterpriseDynamicsData, {
  defaultParams: [{ ...requestParams, pageNum }]
});

const { columns } = useTable();

watch(() => activeTab, (val) => {
  const tabInfo = classifyData.value?.filter(item => val === item.name)[0];
  requestParams.codeLevel1 = tabInfo.code;
});

let filterData: string[] = $ref([]);

function onSubmit (data) {
  console.log(data, '999');
  
  filterData = filterData.filter(item => {
    return !item.startsWith(data[1].index) && item;
  });

  if (data[0]) {
    for (const item of data[0].split(',')) {
      filterData.push(item);
    }
  }
  const levelSecondSpilt = '_2_';
  const levelThirdSpilt = '_3_';
  
  let levelSecond = [];
  let levelThrid = [];
  
  for (const item of filterData) {
    if (item.includes(levelSecondSpilt)) {
      const splitVal = item.split(levelSecondSpilt);
      levelSecond.push(splitVal[1]);
    }
    if (item.includes(levelThirdSpilt)) {
      levelThrid.push(item.split(levelThirdSpilt)[1]);
    }
  }
  
  requestParams.codeLevel1 = '';
  requestParams.codeLevel2 = levelSecond.join(',');
  requestParams.codeLevel3 = levelThrid.join(',');
}

/** 时间时间筛选 */
const handleDateClick = (date) => {
  requestParams.startDate = date[0];
  requestParams.endDate = date[1];
};

/** 翻页点击 */
const handleCurrentChange = (data) => {
  pageNum = data;
  run({ ...requestParams, pageNum });
};

/** 排序 */
const sortChange = (data) => {
  requestParams.order = data.order;
};

watch(
  () => requestParams,
  (val) => {
    pageNum = 1;
    run({ ...val, pageNum });
  },
  {
    deep: true
  }
);
</script>

<template>
  <template v-if="classifyData?.length">
    <page-header :title="tabs.name" :menuId="tabs.id" />
    <vc-empty-fail @click="run({...requestParams, pageNum})" v-if="error" />
    <div v-else class="container" style="--vc-menu-item-height: null">
      <div class="tabs" :style="{...generateCssVars(INIT_TAB_STYLE, 'tabs')}">
        <span class="text">类型</span>
        <template v-if="classifyData?.length">
          <vc-multiple-select
            v-for="(item, index) in classifyData" :key="index"
            :index="index"
            class="mr-20px" :title="item.name+ '('+ item.count + ')'" :options="item.values"
            @submitPlus="onSubmit"
          />
        </template>
        <vc-datepicker title="发布日期" type="daterange" :shortcuts="[30, 365, 365 * 3]"
          @submit="handleDateClick" />
      </div>
      <vc-table
        :loading="loading"
        :tableData="dynamicsData?.items"
        :columns="columns"
        :total="dynamicsData?.total"
        :defaultSort="{
        field: 'date',
        order: 'desc'
      }"
        :pageSize="PAGE_SIZE"
        :pageNum="pageNum"
        @page-change="handleCurrentChange"
        @sort-change="sortChange"
      />
    </div>
  </template>
</template>

<style lang="scss" scoped>
.container {
  .tabs {
    margin: 7px 0 9px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 22px;

    .text {
      font-size: 13px;
      margin-right: 15px;
      text-align: center;
      font-weight: 500;
      line-height: 28px;
    }

    .date {
      margin-left: 36px;
    }
  }

  :deep(.enterprise-dynamics-menu) {
    border-bottom: none;
    margin-top: -2px;

    .vc-menu-item, .vc-sub-menu__title {
      font-size: 13px;
      border-bottom: none;
      //height: 20px;
    }
  }

  :deep(.tabs) {
    .vc-datepicker__title {
      color: black;
      margin-left: 36px;
      font-size: 13px;
      margin-right: 8px;
      line-height: 22px;
      font-weight: 500;
    }

    .vc-datepicker__title {
      margin-left: 0;
    }
    .vc-datepicker__title.is-hasValue {
      color: #00D086
    }
  }
}
</style>

<style lang="scss">
.unique-menu-popover {
  .vc-menu-item, .vc-sub-menu__title {
    font-size: 13px;
  }
}
</style>
